<template>
	<view>
		<!-- {{data.length}} ++ 数量 -->
		<custom-waterfalls-flow ref="waterfallsFlowRef" imageKey="thumbnail" :value="data" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item,index) in data" :key="index" slot="slot{{index}}">
				<view class="title">{{item.name}}</view>
				<view class="desc">{{item.content}}</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.name}}</view>
					<view class="desc">{{item.content}}</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
	</view>
</template>

<script>
	export default {
		name:"goshop-good-waterfalls-flow",
		props: {
		  data:{
				type:Array,
				default:()=>[]
		  }
		},
		data() {
			return {
				column: 2
			}
		},
		onLoad() {
			// setTimeout(()=>{
			// 	this.data.list[1].desc = 'hahah ';
			// },3000)
		},
		methods: {
			add() {
				const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
				this.data = this.data.concat(newArr);
			},
			changeColumn(h) {
				this.column = !h ? this.column - 1 : this.column + 1;
			},
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				console.log('单项点击事件', item)
				this.$emit("wapperClick", item);
			},
			imageClick(item) {
				console.log('图片点击事件', item)
				this.$emit("imageClick", item);
			},
			refresh(){
				console.info('刷新商品流');
				this.$refs.waterfallsFlowRef.refresh();
				this.$refs.waterfallsFlowRef.isLoaded = true;
			},
			reset() {
				debugger
				this.data = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
				this.$refs.waterfallsFlowRef.refresh();
			}
		}
	}
</script>

<style lang="scss">
.item {
	padding: 10rpx 10rpx 20rpx;

	.title {
		line-height: 48rpx;
		font-size: 28rpx;
		color: #222;
	}

	.desc {
		font-size: 24rpx;
		color: #666;
	}
}
.goshop-page-main-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.goshop-page-main-list{
	//background-color: $goshop-color-auxiliary-one;
	padding: 20rpx;
}
</style>